$(function () {
    let id = location.search.split('=')[1];
    let phone;
    let pri;

    $.ajax({
        type: "get",
        url: "../interface/detail.php",
        data: {
            id
        },
        dataType: "json"
    }).then(res => {
        let pic = JSON.parse(res.details);
        let roll = '';
        pic.forEach(el => {
            roll += `<div class="swiper-slide"><img src="./${el.src}"></div>`
        });

        $('.swiper-wrapper').html(roll);

        $('.detail-con>h2').text(res.title);
        phone = res.title;

        if (res.promotion) {
            $('.desc').html(`<p class="desc"><span>${res.promotion}</span> ${res.introduce}</p>`);
        } else {
            $('.desc').html(`<p class="desc">${res.introduce}</p>`);
        }

        $('.detail-con>.price').text(res.price + ' 元');
        pri = res.price;

        if (res.gift) {
            let gif = JSON.parse(res.gift);
            let giftext = '';
            let gifSelect = '';
            gif.forEach(el => {
                if (el.select) {
                    el.select.forEach(elm => {
                        gifSelect += `<div>${elm}</div>`
                    });
                    giftext += ` 
                    <div class="gift">
                        <span>${el.caption}</span>
                        <p>${el.content}</p>
                        ${gifSelect}
                    </div>`
                } else {
                    giftext += ` 
                        <div class="gift">
                            <span>${el.caption}</span>
                            <p>${el.content}</p>
                        </div>`
                }
            });
            $('.gifts').html(giftext);
        } else {
            $('.gifts').css('display', 'none');
        }

        if (res.versions) {
            let ver = JSON.parse(res.versions);
            let vertext = '';
            ver.forEach(el => {
                vertext += `<li>${el.versions}</li>`
            });
            $('.versions>ul').html(vertext);
            verTemp = ver[0].versions
        } else {
            $('.versions').css('display', 'none');
        }

        if (res.color) {
            let color = JSON.parse(res.color);
            let colortext = '';
            color.forEach(el => {
                colortext += `<li>${el.color}</li>`
            });
            $('.color>ul').html(colortext);
            colTemp = color[0].color
        } else {
            $('.color').css('display', 'none');
        }


        if (res.suit) {
            let suit = JSON.parse(res.suit);
            let suittext = '';
            suit.forEach(el => {
                suittext += `<li>${el.suit}</li>`
            });
            $('.suit>ul').html(suittext);
        } else {
            $('.suit').css('display', 'none');
        }

        $('.service-sum').html(`
        <div class="selected">
            <span>${phone} ${verTemp} ${colTemp}</span>
            <p>${pri}元</p>
        </div>
        <div class="total">
            总计：${pri}元
        </div>
        `)

    }).catch(xhr => {
        console.log(xhr.status);
    })

    if (cookie.get('account')) {
        $('.login').css('display', 'none');
    }

    $('.login .text>span').on('click', function () {
        $('.login').css('display', 'none');
    })


    function changeSum() {
        $('.service-sum').html(`
            <div class="selected">
                <span>${phone} ${verTemp} ${colTemp}</span>
                <p>${pri}元</p>
            </div>
            ${vipTemp}${lenTemp}${accidTemp}${cloudTemp}
            <div class="total">
                总计：${parseInt(pri)+parseInt(vipNum)+parseInt(lenNum)+parseInt(accidNum)+parseInt(cloundNum)}元
            </div>
            `)
    }

    //版本号
    let verTemp;
    $('.versions>ul').on('click', 'li', function () {
        $(this).css('border-color', '#ff6700');
        $(this).siblings().css('border-color', '#e0e0e0');
        verTemp = $(this).text();
        changeSum();
    })
    //颜色
    let colTemp;
    $('.color>ul').on('click', 'li', function () {
        $(this).css('border-color', '#ff6700');
        $(this).siblings().css('border-color', '#e0e0e0');
        colTemp = $(this).text();
        changeSum();
    })
    //套装
    $('.suit>ul').on('click', 'li', function () {
        $(this).css('border-color', '#ff6700');
        $(this).siblings().css('border-color', '#e0e0e0');
    })

    //尊享服务
    let vipTemp = '';
    let vipNum = 0;
    let vipCok = '';
    $('.vip .service-con').on('click', function () {
        $(this).toggleClass('service-active');
        if ($(this).attr('class').indexOf('service-active') !== -1) {
            vipTemp = `
            <div class="selected">
                <span>${$(this).attr('title')}</span>
                <p>${$(this).attr('data-price')}</p>
            </div>`
            vipNum = $(this).attr('data-price');
            vipCok = $(this).attr('title');
        } else {
            vipTemp = '';
            vipNum = 0;
            vipCok = '';
        }
        changeSum();
    })
    //延长保修
    let lenTemp = '';
    let lenNum = 0;
    let lenCok = '';
    $('.lengthen .service-con').on('click', function () {
        $(this).toggleClass('service-active');
        if ($(this).attr('class').indexOf('service-active') !== -1) {
            lenTemp = `
            <div class="selected">
                <span>${$(this).attr('title')}</span>
                <p>${$(this).attr('data-price')}</p>
            </div>`
            lenNum = $(this).attr('data-price');
            lenCok = $(this).attr('title');
        } else {
            lenTemp = '';
            vipNum = 0;
            lenCok = '';
        }
        changeSum();
    })
    //意外保护
    let accidTemp = '';
    let accidNum = 0;
    let accCok = '';
    $('.accident .service-con').on('click', function () {
        $(this).toggleClass('service-active');
        $(this).siblings().removeClass('service-active');
        if ($(this).attr('class').indexOf('service-active') !== -1) {
            accidTemp = `
            <div class="selected">
                <span>${$(this).attr('title')}</span>
                <p>${$(this).attr('data-price')}</p>
            </div>`
            accidNum = $(this).attr('data-price');
            accCok = $(this).attr('title');
        } else {
            accidTemp = '';
            accidNum = 0;
            accCok = '';
        }
        changeSum();
    })
    //云空间
    let cloudTemp = '';
    let cloundNum = 0;
    let cloundCok = '';
    $('.cloud .service-con').on('click', function () {
        $(this).toggleClass('service-active');
        $(this).siblings().removeClass('service-active');
        if ($(this).attr('class').indexOf('service-active') !== -1) {
            cloudTemp = `
            <div class="selected">
                <span>${$(this).attr('title')}</span>
                <p>${$(this).attr('data-price')}</p>
            </div>`
            cloundNum = $(this).attr('data-price');
            cloundCok = $(this).attr('title');
        } else {
            cloudTemp = '';
            cloundNum = 0;
            cloundCok = '';
        }
        changeSum();
    })


    //购物车
    function add(id, num, name, ...insurance) {
        let product = {
            id,
            num,
            name,
            insurance
        };

        let shop = cookie.get('shop'); // 从cookie中获取数据

        if (shop) { // 判断cookie中是否有数据
            // 有数据则获得一个JSON字符串
            // 转成对象
            shop = JSON.parse(shop);

            // 判断当前商品的id在cookie数据中是否已经存在 如果已经存在则修改数量 不添加数据
            if (shop.some(el => el.id == id)) {
                let index = shop.findIndex(elm => elm.id == id); // 找到当前商品的索引
                let count = parseInt(shop[index].num); // 获得当前商品的数量
                count++;
                shop[index].num = count;
                shop.filter(el => el.id == id).map(el => el.insurance = insurance)
            } else { // 当前商品id在cookie数据中不存在 添加数据
                shop.push(product);
            }



        } else { // 没有获得cookie数据时 初始化成一个数组 然后添加数据
            shop = [];
            shop.push(product);
        }

        cookie.set('shop', JSON.stringify(shop));
    }

    $('.add').on('click', function () {
        add(id, 1, (phone + " " + verTemp + " " + colTemp), vipCok, lenCok, accCok, cloundCok);
    });
})